<template>
  <!-- 表格 -->
  <el-table :data="data" style="width: 100%">
    <el-table-column
      v-for="column in columns"
      :key="column.prop"
      :prop="column.prop"
      :label="column.label"
      :width="column.width"
    />
    <!-- 图片列 -->
    <el-table-column label="图片" v-if="$slots.image">
      <template #default="scope">
        <slot name="image" :row="scope.row"></slot>
      </template>
    </el-table-column>
    <!-- 操作列 -->
    <el-table-column label="操作" v-if="$slots.actions">
      <template #default="scope">
        <slot name="actions" :row="scope.row"></slot>
      </template>
    </el-table-column>
    <!-- 上传图片 -->
    <el-table-column label="上传图片" v-if="$slots.upload">
      <template #default="scope">
        <slot
          name="upload"
          :row="scope.row"
          :imageUrl="imageUrl"
          @handleAvatarSuccess="handleAvatarSuccess"
          @beforeAvatarUpload="beforeAvatarUpload"
        ></slot>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页 -->
  <div v-if="pagination" class="pagination-container">
    <slot name="pagination">
      <el-pagination
        :current-page="pagination.currentPage"
        :page-size="pagination.pageSize"
        :total="pagination.total"
        @current-change="onPageChange"
        @size-change="onSizeChange"
      />
    </slot>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from "vue";

// 定义表格列
interface TableColumn {
  prop: string;
  label: string;
  width?: number;
}
// 定义分页属性
interface Pagination {
  currentPage: number;
  pageSize: number;
  total: number;
}

// 定义属性
const props = defineProps<{
  data: any[];
  columns: TableColumn[];
  pagination?: Pagination;
  imageUrl?: string;
}>();
const emit = defineEmits([
  "onPageChange",
  "onSizeChange",
  "handleAvatarSuccess",
  "beforeAvatarUpload",
]);
const onPageChange = (page: number) => {
  emit("onPageChange", page);
};
const onSizeChange = (size: number) => {
  emit("onSizeChange", size);
};

// 上传图片前
const beforeAvatarUpload = (rawFile: any) => {
  emit("beforeAvatarUpload", rawFile);
};
// 上传图片成功
const handleAvatarSuccess = (res: any) => {
  emit("handleAvatarSuccess", res);
};
</script>
